<template>
    <div>
        <li>
            <input type="checkbox" @change="cut" :checked="done">
            <p v-if="EditStatus === false" @click="EditStatus = true">{{ props.content }}</p>
            <input type="text" id="a" v-else :value="props.content" v-focus @blur="edit" @keyup.enter="edit" />
            <button @click="EachDelete()">删除</button>
        </li>
    </div>
</template>
<script setup>
import { ref } from "vue"

const EditStatus = ref(false)
const emit = defineEmits(['cut', 'edit', 'EachDelete'])
const props = defineProps({
    id: {
        type: String,
        required: true,
    },
    content: {
        type: String,
        required: true,
    },
    done: {
        type: Boolean,
        required: true,
    },
})

const cut = (event) => {
    emit('cut', props.id, event.target.checked)
}

const edit = (event) => {
    EditStatus.value = false
    emit('edit', props.id, event.target.value.trim())
}

const EachDelete = () => {
    emit('EachDelete', props.id)
}

const vFocus = {
    mounted(el) {
        el.focus()
    },
}
</script>
<style scoped>
li p {
    display: flex;
    flex: 1;
}

li button {
    cursor: pointer;
    width: 50px;
}

li {
    display: flex;
    align-items: center;
    height: 40px;
    list-style: none;
    border-bottom: 1px solid #eee;
    padding: 0 60px;
}


ul:hover {
    background-color: #c7c7c7;
}

#a {
    display: flex;
    flex: 1;
}
</style>